import React, { createContext, useState, useContext, useEffect } from 'react';
//1.创建上下文：建立一个全局的数据共享机制
const AuthContext = createContext();

//2.定义AuthProvider组件
export const AuthProvider = ({ children }) => {
    //3.状态定义
  const [isAuthenticated, setIsAuthenticated] = useState(false);//布尔值，表示用户是否认证（登录）
  const [user, setUser] = useState(null); //存储当前用户的信息，初始为null


  // 4. 副作用（useEffect）：
  useEffect(() => {
    // 检查localStorage中是否有用户信息
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
      setUser(JSON.parse(storedUser));
      setIsAuthenticated(true);
    }
  }, []);

  // 5. 登录函数（login）
  const login = (username) => {
    const userData = { username, role: 'user' };
    setUser(userData);
    setIsAuthenticated(true);
    localStorage.setItem('user', JSON.stringify(userData));
  };

  // 6. 登出函数（logout）：
  const logout = () => {
    setUser(null);
    setIsAuthenticated(false);
    localStorage.removeItem('user');
  };

  return (
    // 7. 返回AuthContext.Provider，将状态和方法作为value提供给子组件。
    <AuthContext.Provider value={{ isAuthenticated, user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};


// 8. 导出useAuth钩子：
export const useAuth = () => useContext(AuthContext);